{% include "header.html" %}
<!-- Page Name -->
<div id="page-name">
    <div class="row">
        <div class="twelve columns">
            <h1>Quiz</h1>
        </div>
    </div>
</div>

  <!-- Main Page Content and Sidebar -->

  <div class="row">

    <!-- Page Details -->
    <section class="eight columns">

      <article class="post">
	      
	      <div class="row">
	      
		      <div class="twelve columns">
		      
			      <h2 class="titulo-quiz">{{ quiz.title }}</h2>

			      <form method="POST" class="custom respostas" action="{% url WebSite.views.quizFinal quiz.id %}">
                      {% csrf_token %}
                      <input id="startTimeInput" type="hidden" name="start_time" />
                  {%  for question in quiz.question_set.all %}
                      {% if forloop.counter > 1 %}
                          <div id="question{{ forloop.counter }}" style="display: none" class="question_div" >
                      {%  else %}
                          <div id="question{{ forloop.counter }}" class="question_div" >
                      {%  endif %}

                      <h3 class="pergunta"><span>{{ forloop.counter }}/{{ quiz.question_set.count }}</span>{{ question.text }}</h3>
                      <label for="radio1{{ forloop.counter }}"><input name="question{{ question.id }}" value="1" type="radio" id="radio1{{ forloop.counter }}" checked="checked" style="display: none; "><span class="custom radio"></span> {{ question.answer1 }}</label>
                      <label for="radio2{{ forloop.counter }}"><input name="question{{ question.id }}" value="2" type="radio" id="radio2{{ forloop.counter }}" style="display: none; "><span class="custom radio"></span> {{ question.answer2 }}</label>
                      {% if question.answer3 %}
                          <label for="radio3{{ forloop.counter }}"><input name="question{{ question.id }}" value="3" type="radio" id="radio3{{ forloop.counter }}" style="display: none; "><span class="custom radio"></span> {{ question.answer3 }}</label>
                      {% endif %}
                      {% if question.answer4 %}
                          <label for="radio4{{ forloop.counter }}"><input name="question{{ question.id }}" value="4" type="radio" id="radio4{{ forloop.counter }}" style="display: none; "><span class="custom radio"></span> {{ question.answer4 }}</label>
                      {% endif %}
                      {% if question.answer5 %}
                          <label for="radio5{{ forloop.counter }}"><input name="question{{ question.id }}" value="5" type="radio" id="radio5{{ forloop.counter }}" style="display: none; "><span class="custom radio"></span> {{ question.answer5 }}</label>
                      {% endif %}
                      </div>
                  {% endfor %}
                      <button id="nextQuestionBtn" type="button" class="radius button right">Próxima</button>
                      <button id="finishBtn" type="submit" class="radius button right" style="display: none">Finalizar</button>
			      </form>

		      </div>
	      
	      </div>
	      
      </article>

    </section>

    <!-- End Contact Details -->


    <!-- Sidebar -->
    
    <aside class="four columns">
	    
	    <div class="cronometro">
	    	<i class="general foundicon-clock"></i> <span id="stopwatch">00:00:00</span>
	    </div>
    
    </aside>

      <!-- Included JS Files (Compressed) -->
      <script src="{{ MEDIA_URL }}javascripts/jquery.js"></script>
      <script src="{{ MEDIA_URL }}javascripts/foundation.min.js"></script>
      <!-- Initialize JS Plugins -->
      <script src="{{ MEDIA_URL }}javascripts/app.js"></script>

      <script type="text/javascript">
            $( document ).ready(function(){
                var stopwatch = $( "#stopwatch" );
                var seconds = 0;

                function formatStopwatch( seconds ) {

                    minutes = Math.floor( seconds / 60 );
                    seconds = seconds % 60;
                    hours = Math.floor( minutes / 60 );
                    minutes = minutes % 60;

                    result = "";
                    if( hours < 10 ) result = "0" + hours;
                    else result = "" + hours;

                    result += ":";

                    if( minutes < 10 ) result = result + "0" + minutes;
                    else result = result + minutes;

                    result += ":";

                    if( seconds < 10 ) result = result + "0" + seconds;
                    else result = result + seconds;

                    return result;
                }

                function updateStopwatch() {
                    setTimeout( function() {
                        seconds += 1;
                        stopwatch.text( formatStopwatch( seconds ) );
                        updateStopwatch();
                    } , 1000 );
                }

                updateStopwatch();
                $( "#startTimeInput" ).val( Math.round((new Date()).getTime() / 1000) );

                var currentQuestion = 1;
                var totalOfQuestions = $( "div.question_div" ).size();
                var currentDivQuestion = $( "#question" + currentQuestion );
                var finishBtn = $( "#finishBtn" );
                var nextQuestionBtn = $( "#nextQuestionBtn" );

                nextQuestionBtn.click(function(){
                    currentQuestion += 1;
                    currentDivQuestion.fadeOut(function(){
                        currentDivQuestion = $( "#question" + currentQuestion );
                        currentDivQuestion.fadeIn();
                        if( currentQuestion == totalOfQuestions ) {
                            nextQuestionBtn.hide();
                            finishBtn.show();
                        }
                    });
                });
            });

      </script>

      <script type="text/javascript">
          $('#slider').orbit({
              animation: 'horizontal-push',                  // fade, horizontal-slide, vertical-slide, horizontal-push
              animationSpeed: 800,                // how fast animtions are
              timer: false, 			 // true or false to have the timer
              resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
              advanceSpeed: 4000, 		 // if timer is enabled, time between transitions
              pauseOnHover: true, 		 // if you hover pauses the slider
              startClockOnMouseOut: false, 	 // if clock should start on MouseOut
              startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
              directionalNav: false, 		 // manual advancing directional navs
              captions: false, 			 // do you want captions?
              captionAnimation: 'fade', 		 // fade, slideOpen, none
              captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
              bullets: true,			 // true or false to activate the bullet navigation
              bulletThumbs: false,		 // thumbnails for the bullets
              bulletThumbLocation: '',		 // location from this file where thumbs will be
              afterSlideChange: function(){}, 	 // empty function
              fluid: '16x6'                         // or set a aspect ratio for content slides (ex: '4x3')
          });
      </script>
    <!-- End Sidebar -->
  </div>

    <!-- End Main Content and Sidebar -->
    {% include "footer.html" %}
